<script lang="ts" setup>
import { onPageScroll, onReady } from '@dcloudio/uni-app'
import { useScrollUpdownBottomContent } from '@/hooks'
import { useSubPage } from './composables'
const {
  navBarInfo,
  userInfo,
  loginHandle,
  navUserInfoPage,
  navCommonProblemPage,
  navMemberRightsPage,
  navOrderListPage,
  navbarInitFinishHandle,
} = useSubPage()
const { style: authInfoScrollStyle, scrollHandle: authInfoScrollHandle } =
  useScrollUpdownBottomContent('up', 80)
const friend = [
  {
    url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1666880829035-assets/web-upload/af62059a-aa92-44c5-9e6f-2be519f3de32.jpeg',
    // https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1666880572856-assets/web-upload/77f07f2b-404d-4c08-8264-f70b8be138f9.jpeg
    title: '英汉互译',
    appid: 'wxcd661761a9f2d61e',
    path: '',
  },
  {
    url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1666880878599-assets/web-upload/20429d4b-2776-445b-884a-78aa14901934.jpeg',
    title: '对话翻译',
    appid: 'wx7560d334dd837f70',
    path: '',
  },
  {
    url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1666880969854-assets/web-upload/95902944-1be6-4c23-a2f5-47cf78eda072.jpeg',
    title: '语音转文字',
    appid: 'wx2257f5c246ad1bcd',
    path: '',
  },
  {
    url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1667656184223-assets/web-upload/cc3dbf5c-1483-4c74-83fc-03c2bd7c373e.jpeg',
    title: '标准发音',
    appid: 'wx86cc21f2f7fa3efa',
    path: '',
  },
  {
    url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1666881024970-assets/web-upload/ce66dc47-d34f-499b-ab19-8253d5115f2c.jpeg',
    title: '文本翻译',
    appid: 'wx59376c14388a2165',
    path: '',
  },
  {
    url: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1679214581056-assets/web-upload/49298d50-78e1-4466-a01c-e3b4249adebb.jpeg',
    title: '同声传译',
    appid: 'wxa1fdf598239935d7',
    path: '',
  },
  {
    url: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1666881024970-assets/web-upload/ce66dc47-d34f-499b-ab19-8253d5115f2c.jpeg',
    title: '超多语言',
    appid: 'wx59376c14388a2165',
    path: '',
  },
  {
    url: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1679214581056-assets/web-upload/49298d50-78e1-4466-a01c-e3b4249adebb.jpeg',
    title: '拍照翻译',
    appid: 'wxa1fdf598239935d7',
    path: '',
  },
]
onReady(() => {})
onPageScroll((e) => {})
</script>

<template>
  <TnNavbar
    fixed
    bg-color="transparent"
    :bottom-shadow="false"
    :placeholder="false"
    title="续费"
    @init-finish="navbarInitFinishHandle"
    index-url="/pages/typeStudy/dialogue/index"
  >
    <view class="tn-color-white">续费</view>
  </TnNavbar>
  <!-- 顶部背景 -->
  <view class="top-bg" />
  <!-- 页面内容 -->
  <view class="page" :style="{ paddingTop: `${navBarInfo.height + 12}px` }">
    <view class="tn-margin">
      <view
        class="button-vip tn-flex tn-flex-row-between tn-shadow-blur tn-main-gradient-aquablue"
      >
        <view class="tn-margin-left tn-margin-top-lg">
          <view class="tn-color-white tn-padding-top tn-text-center">
            <text class="tn-text-bold" style="font-size: 40rpx"
              >账户：02:12:34:28:26</text
            >
          </view>
          <view
            class="tn-color-white tn-text-sm"
            style="padding-top: 65rpx; opacity: 0.6"
            >到期时间：2025-03-22 09:00:00</view
          >
        </view>
      </view>
    </view>

    <view
      class="tn-margin tn-padding-top tn-color-white tn-text-lg tn-text-bold"
    >
      翻译特权
    </view>

    <view
      class="tn-flex tn-flex-col-center tn-flex-wrap tn-color-white tn-margin-sm"
    >
      <view class="tn-padding-sm tn-text-center tag-select">
        <view class="tn-text-xl tn-padding-top-sm">
          <text
            class="tn-icon-rabbit tn-padding-right-sm"
            style="margin-left: -10rpx"
          ></text>
          <text class="tn-text-bold">包年</text>
        </view>
        <view class="tn-padding-top-xs" style="color: #888ca0"> ￥166.00 </view>
      </view>
      <view class="tn-padding-sm tn-text-center tag-select-no">
        <view class="tn-text-xl tn-padding-top-sm">
          <text
            class="tn-icon-rabbit tn-padding-right-sm"
            style="margin-left: -10rpx"
          ></text>
          <text class="tn-text-bold">包月</text>
        </view>
        <view class="tn-padding-top-xs" style="color: #888ca0"> ￥30.00 </view>
      </view>
    </view>
    <view
      class="tn-margin tn-padding-top tn-color-white tn-text-lg tn-text-bold"
    >
      尊享特权
    </view>
    <view class="tn-flex tn-flex-wrap" style="margin: 15rpx">
      <navigator
        target="miniProgram"
        :app-id="item.appid"
        :path="item.path"
        version="release"
        delta="1"
        hover-class="none"
        v-for="(item, index) in friend"
        :key="index"
        style="width: 50%"
      >
        <view
          class="tn-flex tn-flex-row-between tn-flex-col-center nav-shadow"
          style="margin: 8rpx; padding: 20rpx"
        >
          <view class="justify-content-item">
            <view class="tn-flex tn-flex-col-center tn-flex-row-left">
              <view class="">
                <view class="logo-pic">
                  <view
                    class="logo-image"
                    :style="
                      'background-image:url(' +
                      item.url +
                      ');background-size: cover;'
                    "
                  >
                  </view>
                </view>
              </view>
              <view class="">
                <view class="tn-padding-left-sm">
                  <text class="tn-color-cat tn-text-bold">{{
                    item.title
                  }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </navigator>
    </view>
    <!-- 底部操作栏 -->
    <view class="bottom-operation-bar tn-shadow">
      <view class="left">
        <view
          class="left-btn-item first"
          @tap.stop="tnNavPage('/pages/index/index', 'reLaunch')"
        >
          <view class="title tn-color-white tn-text-sm">￥139元</view>
        </view>
      </view>
      <view class="buy-btn tn-gradient-bg__cool-8 tn-white_text tn-shadow-blur">
        支付
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import './styles/index.scss';
</style>
